//导入gulp压缩模块
const gulp = require('gulp')

//导入css
const cssmin = require('gulp-cssmin')
//导入前缀 gulp-autoprefixer
const autoprefixer = require('gulp-autoprefixer')
//导入sass模块
const sass = require('gulp-sass')

// 导入js压缩模块 gulp-uglify
const uglify = require('gulp-uglify')
//导入gulp-babel模块
const babel = require('gulp-babel')

// 导入gulp-htmlmin模块
const htmlmin = require('gulp-htmlmin')

// 导入gulp-webserver模块
const webserver = require('gulp-webserver')

// 导入删除模块
const del = require('del')

// sass方法
const sassHandler = () => {
  return gulp.src('./src/sass/*.scss')
              .pipe(sass())
              .pipe(autoprefixer())
              .pipe(cssmin())
              .pipe(gulp.dest('./src/css'))
} 
//css方法
const cssHandler = () => {
      return gulp.src('./src/css/*.css')
                 // .pipe(autoprefixer())
                  //.pipe(cssmin())
                  .pipe(gulp.dest('./dist/css'))
}


//js方法
const jsHandler = () => {
        return gulp.src('./src/js/*.js')
                    .pipe(babel({
                      presets: ['@babel/env']
                    }))
                    .pipe(uglify())
                    .pipe(gulp.dest('./dist/js'))
}


//html方法
const htmlHandler = () => {
  return gulp.src('./src/html/*.html')
              .pipe(htmlmin(
                {
                  removeAttributeQuotes: true, // 移出属性上的双引号
                  removeComments: true, // 移除注释
                  collapseBooleanAttributes: true, // 把值为布尔值的属性简写
                  collapseWhitespace: true, // 移除所有空格, 变成一行代码
                  minifyCSS: true, // 把页面里面的 style 标签里面的 css 样式也去空格
                  minifyJS: true, // 把页面里面的 script 标签里面的 js 代码给去空格
                }
              ))
              .pipe(gulp.dest('./dist/pages'))
}

//移动图片
const imgHandler = () => {
  return gulp.src('./src/images/**') 
             .pipe(gulp.dest('./dist/images')) 
}

// 移动库
const libHandler = () => {
  return gulp.src('./src/lib/**')
             .pipe(gulp.dest('./dist/lib'))
}

const  serverHandler = () => {
              return gulp.src('./dist')
                          .pipe(webserver({
                            host: 'localhost', // 域名, 这个域名可以自定义
                            port: 8080, // 端口号, 0 ~ 65535, 尽量不适用 0 ~ 1023
                            open: './pages/index.html', // 你默认打开的首页, 从 dist 下面的目录开始书写
                            livereload: true, // 自动刷新浏览器 - 热重启
                            // 所有的代理配置都在 proxies 里面
                            proxies: [
                              {
                                source:'/login',
                                target:'http://localhost/xiangmu/login.php'
                              },
                              {
                                source:'/register',
                                target:'http://localhost/xiangmu/register.php'
                              }

                            ]
                          }))
}

//删除方法
const delHandler =  () => {
  return del(['./dist'])
}

// 监听方法
const watchHandler = () => {
        gulp.watch('./src/sass/*.scss',sassHandler)
        gulp.watch('./src/css/*.css',cssHandler)
        gulp.watch('./src/js/*.js', jsHandler)
        gulp.watch('./src/html/*.html', htmlHandler)
        gulp.watch('./src/lib/**', libHandler)
        gulp.watch('./src/images/**', imgHandler)
}   


module.exports.default = gulp.series(
  delHandler,
  gulp.parallel(sassHandler,cssHandler, jsHandler, htmlHandler, imgHandler, libHandler),
  serverHandler,
  watchHandler
)